<script setup lang="ts">
import {
  Plus,
  Edit,
  Close,
  Connection,
  Delete,
  Tools,
} from '@element-plus/icons-vue';

const userStore = useUserStore();

const currentIndex = ref('');

const addChat = () => {
  userStore.pushChat({
    guid: useGuid(5),
    remark: '备注',
    avator: '',
    nickname: 'WhatsApp',
    isEdit: false,
  });
};

const delChat = (index: number, guid: string) => {
  userStore.removeChat(index);
  if (currentIndex.value == guid) {
    closeWeb();
  }
};

const openWeb = (item: any) => {
  currentIndex.value = item.guid;
  openView();
  window.windows.onUserInfo((_, userInfo) => {
    console.log(userInfo);
    item.nickname = userInfo.username;
    item.avator = userInfo.avator;
    item.userId = userInfo.userId;
    userStore.cacheChatList();
  });
};

const closeWeb = () => {
  currentIndex.value = '';
  window.windows.closeBrowserView();
};

let timer: NodeJS.Timeout | null = null;
const openView = () => {
  loading.value = true;
  errorInfo.value = false;
  timer && clearTimeout(timer);
  timer = setTimeout(() => {
    if (loading.value) {
      errorInfo.value = true;
      loading.value = false;
      closeWeb();
    }
  }, 60000);
  window.windows.createBrowserView({
    persist: currentIndex.value,
  });
};

const loading = ref(false);
const errorInfo = ref(false);

onActivated(() => {
  window.windows.onStopLoading((_data: any) => {
    loading.value = false;
    timer && clearTimeout(timer);
    timer = null;
  });
});

onDeactivated(() => {
  closeWeb();
});
</script>

<template>
  <div class="flex chat-content">
    <div class="w-[200px] py-[10px] pr-[10px]">
      <h2>WhatsApp</h2>
      <el-tag type="success" class="w-full mt-[5px]">免费版</el-tag>
      <el-button
        class="w-full mt-[10px]"
        type="primary"
        :icon="Plus"
        @click="addChat"
        >新建会话</el-button
      >
      <el-alert
        title="error: 网络连接超时"
        type="error"
        class="w-full mt-[5px]"
        style="margin-top: 5px"
        v-if="errorInfo" />
      <div class="chat-container">
        <div
          class="item"
          v-for="(item, index) of userStore.chatList"
          :key="item.guid"
          :class="{ active: item.guid == currentIndex }">
          <div class="flex items-center relative pr-[10px]">
            <el-avatar
              :size="40"
              :src="
                item.avator ||
                'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
              " />
            <div class="flex flex-col ml-[5px]">
              <span class="nickname">{{ item.nickname }}</span>
              <span class="remark">-</span>
            </div>
            <div
              class="absolute top-0 right-[-5px] cursor-pointer close-btn"
              @click="closeWeb()">
              <el-icon><close /></el-icon>
            </div>
          </div>
          <div class="edit-row" @click="item.isEdit = true">
            <el-icon class="icon" color="var(--el-text-color-regular)">
              <edit />
            </el-icon>
            <span
              v-if="!item.isEdit"
              class="text-[12px] text-[var(--el-text-color-secondary)]"
              >{{ item.remark }}</span
            >
            <el-input
              v-else
              @blur="
                item.isEdit = false;
                userStore.cacheChatList();
              "
              size="small"
              v-model="item.remark"
              class="ml-[5px]"></el-input>
          </div>
          <div class="edit-row">
            <el-icon class="icon" color="var(--el-text-color-regular)">
              <edit />
            </el-icon>
            <span class="text-[12px] text-[var(--el-text-color-secondary)]"
              >-</span
            >
          </div>
          <div class="opt-btn">
            <el-icon
              :size="30"
              color="#79bbff"
              @click="openWeb(item)"
              title="打开"
              ><Connection
            /></el-icon>
            <el-icon :size="30" color="#79bbff" title="设置"><Tools /></el-icon>
            <el-icon
              :size="30"
              color="#79bbff"
              @click="delChat(index, item.guid)"
              title="删除"
              ><Delete
            /></el-icon>
          </div>
          <div
            class="loading"
            :class="{ 'show-loading': currentIndex == item.guid && loading }"
            v-loading="loading"
            element-loading-text="正在打开中"></div>
        </div>
      </div>
    </div>
    <div class="webview">
      <div
        v-if="!loading"
        style="height: 100%; display: flex; justify-content: center">
        <img style="width: 500px; object-fit: none" src="/noMsg.png" alt="" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chat-content {
  padding: 10px;
  height: calc(100vh - 31px);

  .chat-container {
    .item {
      margin-top: 10px;
      height: 110px;
      box-sizing: border-box;
      background-color: var(--el-color-info-light-9);
      border-radius: var(--el-border-radius-base);
      // border: 1px solid var(--el-border-color);
      padding: 10px;
      color: var(--el-text-color-primary);
      position: relative;

      .opt-btn {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
        visibility: hidden;
      }

      .loading {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        visibility: hidden;
      }

      .show-loading {
        visibility: visible;
      }

      &:hover {
        .opt-btn {
          visibility: visible;
          .el-icon {
            cursor: pointer;
          }
        }
      }

      .edit-row {
        margin-top: 8px;
        display: flex;
        align-items: center;
        cursor: pointer;
        .icon {
          font-size: 14px;
        }

        &:hover {
          .icon {
            font-size: 16px;
          }
        }
      }

      .nickname {
        font-size: 14px;
        font-weight: bold;
      }

      .remark {
        font-size: 12px;
      }
    }

    .active {
      background-color: #ffffff;
      border: 1px solid var(--el-color-primary);

      &:hover {
        .opt-btn {
          visibility: hidden;
        }
      }
    }
  }
  .webview {
    flex: 1;
  }
}
</style>
